<template>
  <div class="h-full flex">
    <div class="w-100% h-100%">
      <el-tabs type="border-card">
        <el-tab-pane label="AES解密">
          <el-input class="mb-10px" style="width: 400px" v-model="form.code" placeholder="加密串" />
          <div class="w-100% h-400px flex gap-10">
            <div class="w-45% h-100% overflow-auto">
              <!-- <el-input
                v-model="form.encryption"
                placeholder="中文字符"
                resize="none"
                autofocus
                :autosize="false"
                :rows="18"
                type="textarea"
              /> -->
              <json-viewer
                :value="form.encryption"
                :expand-depth="5"
                copyable
                boxed
                sort
                expanded
              ></json-viewer>
            </div>
            <div class="w-10% h-100% flex items-center justify-center">
              <!-- <el-button @click="decryptFn">加密</el-button> -->
              <el-button type="primary" @click="encryptFn">解密</el-button>
            </div>
            <div class="w-45% h-100%">
              <el-input
                v-model="form.decrypt"
                placeholder="密文"
                resize="none"
                :autosize="false"
                :rows="18"
                type="textarea"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AES from '@/utils/aes'
const form = ref({
  encryption: '',
  decrypt:
    'SV0SJhGz5odOQUzwsFx9/htgV7BweEEFpj1K6YsospojV60kccop4wpsT1k+bJpkHZDHr/Q7RVAXhd8rHlIcYgXZr8l7osnC8By5XBQagOnuDUuycgv5sUz2d6rD3IkQ8EQ411q1vtXkJAi39QO172pAikBLUPZFFpwYsv0bR4oRPR7WgXks5SWFV9JH0H0eO5K7KZvDcuDQIk1B81gF7Q0lytMyWiG3siZeS0LBEsClgt3KGUVGuLN/45Tp3zhq',
  code: 'C0D2ACC1205B4028A4888CAC475FBE35'
})
// 加密
function decryptFn() {
  form.value.decrypt = AES.Encrypt(form.value.encryption, form.value.code)
}
// 解密
function encryptFn() {
  form.value.encryption = JSON.parse(AES.Decrypt(form.value.decrypt, form.value.code))
}
</script>
<style scoped lang="scss"></style>
